<template>
	<view style="display: flex;flex-direction: column;">
		<view class="" style="position: fixed;top: 0;width: 100%;z-index: 100;">
			<view class="" style="position: relative;">
				<view class="status_bar">
				          <!-- 这里是状态栏 -->
				</view>
				<view class="uni-flex search">
					<image src="../../static/image/fanhui.png" mode="" class="logo" @tap="fanhui()"></image>
					<uni-search-bar :radius="32" @confirm="search" bgColor="#F6F8F8" :placeholder="sousuoci" style="flex: 1;" ></uni-search-bar>
					<!-- <view class="my-task" v-if="userInfo.type==1" @tap="$util.toUrl('./maijiashiyongGuize')">试用规则</view> -->
				</view>
			</view>
		</view>
		
		
		<view v-if="userInfo.type==1" class="content" style="margin-top: 120rpx;z-index: 0;">
			
			<view class="" v-if="list.length==0" style="position: absolute;margin: auto;top:300rpx;left: 0;right: 0;width: 300rpx;text-align: center;">
				<image  src="../../static/image/nodata1.png" mode="" style="width: 300rpx;height: 200rpx;"></image>
				暂无数据
			</view>
			
			<view class="card"  v-for="(item,index) in list" :key="item.id">
				<view class="oneTui uni-flex"  @tap="$util.toUrl('./shangjiaInfo?id='+item.uid)">
					<view class="" style="position: relative;margin-right: 16rpx;">
						<view class="touxiang">
							<image :src="$jiekou.uploadBaseUrl+item.head" mode="" class=""></image>
						</view>
						<!-- <view class="zaixian yuandian "></view> -->
					</view>
					
					<view class="neirong">
						<view class="uni-flex">
							<!-- <text class="user-name">{{item.username}}</text>
							<image src="../../static/image/yirenzheng.png" v-if="item.attestation==2" mode="" class="renzhengtu"></image> -->
							<view class="" style="flex: 1;">
								<text class="user-name">{{item.username}}</text>
								<image v-if="item.attestation==2" src="../../static/image/yirenzheng.png" mode="" class="renzhengtu"></image>
							</view>
							<view class="pingding">综合评定:{{zonghepingfen[item.pingfen]}}</view>
						</view>
						<view class="biaoqians uni-flex">
							<view class="biaoqian">商家ID：{{item.uid}}</view>
							<view class="biaoqian" v-if="item.tuanduiid != undefined && item.tuanduiid != ''">团队ID：{{item.tuanduiid}}</view>
						</view>
					</view>
				</view>
				<view class="user-info"  @tap="$util.toUrl('./shiyonginfo?id='+item.id)">
					<view class="xinxishuoming">
						<view class="pingtai">任务标题</view>
						<view class="jingdong">{{item.title}}</view>
					</view>
					<view class="xinxishuoming">
						<view class="pingtai">购物平台</view>
						<view class="jingdong">{{item.pingtaiStr}}</view>
					</view>
					<view class="xinxishuoming">
						<view class="pingtai">商品价格</view>
						<view class="jingdong">¥{{item.pirce}}</view>
					</view>
					<view class="xinxishuoming">
						<view class="pingtai">所需单数</view>
						<view class="jingdong">{{item.danshu}}单</view>
					</view>
					<view class="xinxishuoming">
						<view class="pingtai">截止日期</view>
						<view class="jingdong">{{item.jiezhi_time | dateFormat('YYYY年mm月dd日')}}</view>
					</view>
				</view>
			</view>
	
		</view>
		
		<view v-else class="" style="padding-top: 20rpx;" v-for="(item,index) in userList" :key="item.id" @tap="linkTo(item)">
			<view class="oneTui uni-flex">
				<view class="" style="position: relative;margin-right: 20rpx;">
					<view class="touxiang">
						<image :src="$jiekou.uploadBaseUrl+item.head" mode="" class=""></image>
					</view>
					<!-- <view :class="[item.Status=='Online'?'zaixian':'','yuandian']"></view> -->
				</view>
				<view class="neirong">
					<view class="uni-flex" style="">
						<view class="" style="flex: 1;">
							<text class="user-name">{{item.username}}</text>
							<image v-if="item.attestation==2" src="../../static/image/yirenzheng.png" mode="" class="renzhengtu"></image>
						</view>
						<view class="pingding">综合评定:{{zonghepingfen[item.pingfen]}}</view>
					</view>
					<view class="biaoqians uni-flex" style="margin-top: 5rpx;">
						<view class="biaoqian">{{maijiashangjia[item.type]}}ID：{{item.id}}</view>
						<view v-if="item.tuanduiid!=undefined && item.tuanduiid!=''" class="biaoqian">团队ID：{{item.tuanduiid}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- <u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" /> -->
	</view>
</template>

<script>
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue';
	import util from '@/common/util.js';
	
	export default {
		components: {
			uniSearchBar
		},
		data() {
			return {
				pageNo:1,
				pageSize:15,
				userId:uni.getStorageSync("token"),
				taskStatus:1,
				list:[],
				zonghepingfen:{},
				userList:[],
				userInfo:uni.getStorageSync("userInfo"),
				searchStr:null,
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					// nomore: '实在没有了'
				},
				count:0,
				sousuoci:""
			}
		},
		onLoad(option){
			var that = this;
			
			
			if(that.userInfo.type==1){
				var data ={
					pageNo:1,
					pageSize:15,
					taskStatus:1
				};
				this.$util.getDictObject("zonghepingfen").then(res=>{
					that.zonghepingfen = res;
				})
				that.getList(data);
				this.sousuoci = "搜索商家用户ID或手机号";
			}else{
				let usertype = 1;
			
				this.$util.getDictObject("zonghepingfen").then(res=>{
					that.zonghepingfen = res;
				})
				this.loadData({keysearch:"",usertype});
				this.sousuoci = "搜索买家用户ID或手机号";
			}
		},
		onPullDownRefresh() {
			var that = this;
			this.pageNo = 1;
			var data ={
				pageNo:this.pageNo,
				pageSize:15,
				taskStatus:1,
			};
			if(this.searchStr!=null && this.searchStr!=""){
				data.userId = this.searchStr;
				console.log(data);
			}
			this.getList(data);
		},
		onReachBottom() {
			if(this.status=="nomore"){
				return;
			}
			var that = this;
			if(this.userInfo.type==1){
				this.pageNo = this.pageNo+1;
				var data ={
					pageNo:this.pageNo,
					pageSize:15,
					taskStatus:1,
				};
				if(this.searchStr!=null && this.searchStr!=""){
					data.userId = this.searchStr;
				}
				this.getList(data);
			}else{
				
			}
			
		},
		methods: {
			fanhui(){
				uni.navigateBack({})
			},
			search:function(data){
				
				var that = this;
				this.searchStr = data.value;
				if(this.userInfo.type==1){
					var data ={
						pageNo:1,
						pageSize:15,
						sousuoStr:data.value,
						taskStatus:1,
					};
					this.getList(data);
				}else{
					let usertype = 1;
					this.$util.getDictObject("zonghepingfen").then(res=>{
						that.zonghepingfen = res;
					})
					this.loadData({keysearch:data.value,usertype});
				}
				
			},
			getList:function(data){
				var that = this;
				that.$util.nuiAjax(that.$jiekou.selectTaskListMaiJia,data,function(res){
					if(that.pageNo==1){
						that.list = res.list;
					}else{
						that.list.push(...res.list);
					}
					uni.stopPullDownRefresh();
					that.count = res.count;
					if(that.list.length>=that.count){
						that.status = "nomore";
					}else{
						that.status = "loadmore";
					}
				});
			},
			loadData (data) {
				var that = this;
				that.$util.nuiAjax(that.$jiekou.selectTaskListMaiJia,data,function(res){
					console.log(JSON.stringify(res));
					if(that.pageNo==1){
						that.userList = res.data;
					}else{
						that.userList.push(...res.data);
					}
					
					uni.stopPullDownRefresh();
					that.count = res.count;
					console.log(111);
					if(that.userList.length>=that.count){
						that.status = "nomore";
					}else{
						that.status = "loadmore";
					}
					
				});
				
			}
		},
		filters:{
			dateFormat:(date,str)=>{
				if(date!=undefined){
					// date = date.replace(/-/g,"/");
					// date = util.dateUtils.parse(date);
					return util.dateUtils.dateFormat('YYYY年mm月dd日',new Date(date));
				}else{
					return util.dateUtils.dateFormat('YYYY年mm月dd日',date);
				}
			}
		}
	}
</script>

<style lang="scss">
	.pingding{
		height:40rpx;
		font-size:28rpx;
		font-weight:400;
		color:rgba(51,51,51,1);
		line-height:40rpx;
		// padding-right: 30rpx;
	}
	
	.oneTui .zaixian{
		background-color: #10C82E;
	}
	.yuandian{
		position: absolute;
		width: 24rpx;
		height: 24rpx;
		border-radius:24rpx;
		background-color: #818181;
		right: 0;
		bottom: 4rpx;
		
	}
	.xinxishuoming{
		padding-top: 24rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.pingtai{
		height:40rpx;
		font-size:28rpx;
		font-weight:400;
		color:rgba(153,153,153,1);
		line-height:40rpx;
	}
	.jingdong{
		height:40rpx;
		font-size:28rpx;
		font-weight:400;
		color:rgba(51,51,51,1);
		line-height:40rpx;
	}
	.touxiang{
		width: 92rpx;
		height: 92rpx;
		border-radius:50rpx;overflow: hidden;
		
	}
	.touxiang image{
		width: 100%;
		height: 100%;
	}
	.user-name{
		height:44rpx;
		font-size:32rpx;
		font-weight:500;
		color:rgba(25,25,25,1);
		line-height:44rpx;
		padding-right: 8rpx;
	}
	.renzhengtu{
		width: 26rpx;
		height: 32rpx;
		margin-top: 6rpx;
	}
	.biaoqian{
		height:34rpx;
		font-size:24rpx;
		font-weight:400;
		color:$uni-color-primary;
		line-height:34rpx;
		border: 1rpx solid $uni-color-primary;
		border-radius: 4rpx;
		padding: 2rpx 8rpx 0 8rpx;
		margin-right: 8rpx;
	}
	.neirong{
		margin-bottom: 10rpx;
		flex: 1;
	}
	.oneTui{
		background-color: #FFFFFF;
		padding-bottom: 36rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}
	.content{
		flex: 1;
		padding-top: 40rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		overflow-y: scroll;
		/*解决ios上滑动不流畅*/
		-webkit-overflow-scrolling: touch;
	}
	.card{
		background-color: #FFFFFF;
		box-shadow:0px 0px 12rpx 0px rgba(240,240,240,0.5);
		border-radius:8rpx;
		padding: 24rpx;
		padding-bottom: 32rpx;
		margin-bottom: 20rpx;
	}
	.my-task{
		height:40rpx;
		font-size:32rpx;
		font-weight:400;
		color:rgba(51,51,51,1);
		line-height:40rpx;
		margin-top:30rpx;
		margin-left: 20rpx;
		padding-right: 30rpx;
	}
	page{
		background-color: $page-bg-color;
		height: 100%;
	}
	.search{
		background-color: #FFFFFF;
	}
	.status_bar {
	      height: var(--status-bar-height);
	      width: 100%;
		  background-color: #FFFFFF;
	  }
	  .logo{
		  width: 25rpx;
		  height: 40rpx;
		  margin-left: 36rpx;
		  margin-right: 20rpx;
		  margin-top: 30rpx;
	  }
</style>
